<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item>
                        <el-select clearable filterable v-model="dataForm.manufacturer_id" placeholder="设备厂商" style="width: 180px;">
                            <el-option v-for='item in selectData.ManData' :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.region_id" placeholder="区域名称" style="width: 180px;">
							<el-option  v-for="item in selectData.regionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable filterable  v-model="dataForm.road_id" placeholder="道路名称" style="width: 180px;">
							<el-option  v-for="item in selectData.roadData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select  clearable filterable v-model="dataForm.intersection_id" placeholder="路口名称" style="width: 180px;">
							<el-option v-for="item in selectData.intersectionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select  clearable filterable v-model="dataForm.location_id" placeholder="路段名称" style="width: 180px;">
							<el-option v-for="item in selectData.locationData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.monitor_pole_id" placeholder="监控杆名称" style="width: 180px;">
							<el-option  v-for="item in selectData.monitorPoleData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="toQuery">查询</el-button></el-form-item>
				</el-form>
			</div>
			<el-table v-loading="state.tableData.loading" :data="state.tableData.data" style="width: 100%;height:79vh">
				<el-table-column  align="center" prop="id" label="序号"/>
				<el-table-column  align="center" label="设备类型" >
					<template #default="scope">
						<div>
							<div v-if="scope.row.type==1">MEC</div>
							<div v-if="scope.row.type==2">RSU</div>
							<div v-if="scope.row.type==3">近景相机</div>
							<div v-if="scope.row.type==4">远景相机</div>
							<div v-if="scope.row.type==5">鱼眼相机</div>
							<div v-if="scope.row.type==6">激光雷达</div>
							<div v-if="scope.row.type==7">毫米波雷达</div>
							<div v-if="scope.row.type==8">信号灯采集器</div>
							<div v-if="scope.row.type==9">RTK</div>
						</div>
					</template>
				</el-table-column>	
				<el-table-column align="center" prop="device_id" label="唯一编码" />
				<el-table-column align="center" prop="basic.region.name" label="区域名称" />
				<el-table-column align="center" prop="basic.road.name" label="道路名称" />
				<el-table-column align="center" prop="basic.intersection.name" label="路口名称" />
				<el-table-column align="center" prop="basic.location.name" label="路段名称" />
				<el-table-column align="center" label="联网状态" >
					<template #default="scope">
						<div>
							<el-link v-if="scope.row.network_status==0" type="success">在线</el-link>
							<el-link v-else type="danger">离线</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column  align="center"  prop="offline_start_times" label="离线开始时间" />
				<el-table-column  align="center"   label="离线结束时间">
					<template #default="scope">
						<div>
							<div>{{ scope.row.offline_end_times?scope.row.offline_end_times:'-' }}</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</el-card>
		<MenuDialog ref="menuDialogRef" @refresh="getTableList()" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import {historiesApi} from "/@/api/histories/index"
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import {MansAPI} from "/@/api/fun/manufacturer/index"
import {useBasicApi} from "/@/api/system/menu/index"
import {useRoleApi} from "/@/api/system/role/index"
import {deptApi} from "/@/api/system/dept/index"
import {userApi} from "/@/api/system/user/index"
import {dicApi} from "/@/api/system/dic/index"
const BasicApi = useBasicApi()
const roleApi = useRoleApi()
const ManApi = MansAPI()
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
const historApi = historiesApi()
const useApi = userApi()
const depApi = deptApi()
const diApi = dicApi()
// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const state = reactive({
	tableData: {
		data: [],
		loading: true,
	},
});
const total = ref()
// dx定义

const dataForm = ref({
	page:1,
	limit:10,
	include:"basic.region;basic.road;basic.intersection;basic.location",
	region_id:"",
	road_id:"",
	intersection_id:"",
	location_id:"",
	manufacturer_id:"",
	monitor_pole_id:""
})

const getTableList = (async ()=>{
	state.tableData.loading = true
	let res = await historApi.getTableListApi(dataForm.value);
	//console.log(res,666)
	if(res.isSuccess){
		state.tableData.data = res.returnData.data
		state.tableData.loading = false
		total.value = res.returnData.total
		dataForm.value.page = res.returnData.current_page
	}
})
const handleCurrentChange = (val:number)=>{
		dataForm.value.page = val
		getTableList()
}
const selectData = reactive({
		regionData:[],
		roadData:[],
		ManData:[],
		intersectionData:[],
		locationData:[],
		monitorPoleData:[]
	})
const searchForm = ref({search:""})
const getSelectData = (async ()=>{
	searchForm.value.search = `status:1`
	let res = await BasicApi.BasicTableApi(searchForm.value);
	if(res.isSuccess){
		selectData.regionData = res.returnData
	}
	let roadRes = await roleApi.RoleTableApi(searchForm.value);
	if(roadRes.isSuccess){
		selectData.roadData = roadRes.returnData
	}
	let ManRes = await ManApi.getTableList();
	if(ManRes.isSuccess){
		selectData.ManData = ManRes.returnData
	}
	let locationRes = await depApi.getDepList(searchForm.value);
	if(locationRes.isSuccess){
		selectData.locationData = locationRes.returnData
	}
	let intersectionRes = await useApi.userTableApi(searchForm.value);
	if(intersectionRes.isSuccess){
		selectData.intersectionData = intersectionRes.returnData
	}
	let monitorRes = await diApi.getDicList(searchForm.value);
		if(monitorRes.isSuccess){
			selectData.monitorPoleData = monitorRes.returnData
		}
})

const toQuery = () =>{
	getTableList()
}
// dx书写end
// 获取路由数据，真实请从接口获取

// 页面加载时
onMounted(() => {
	getTableList()
	getSelectData()
});
</script>

<style scoped>
	.el-input{
		height: 40px;
	}
	.el-button{
		height: 40px;
	}
</style>
